<mat-card>
  <mat-card-content>

    <form [formGroup]="configForm" (ngSubmit)="submit()">

      <div class="row">

        <div class="col-12">
          <h3 class="my-0 fw-bold">Setup</h3>
          <p class="text-muted">Please provide initial settings for your account</p>
        </div>
        <div class="col-12 mt-4">
          <div class="row">

            <div class="col-xl-3 col-md-6 col-12">

              <mat-form-field class="w-100 standalone-field">
                <span
                  matPrefix
                  matTooltip="Your full name"
                  class="d-flex flex-nowrap align-items-center justify-content-between me-2">
                  <mat-icon>person</mat-icon>
                  <span class="text-muted">|</span>
                </span>
    
                <input
                  matInput
                  autocomplete="name"
                  placeholder="Full name"
                  formControlName="name"
                  name="name">
                <mat-error>
                  Name is required
                </mat-error>
              </mat-form-field>

            </div>

            <div class="col-xl-3 col-md-6 col-12">

              <mat-form-field class="w-100 standalone-field">
                <span
                  matPrefix
                  matTooltip="Your email address"
                  class="d-flex flex-nowrap align-items-center justify-content-between me-2">
                  <mat-icon>mail</mat-icon>
                  <span class="text-muted">|</span>
                </span>
    
                <input
                  matInput
                  autocomplete="email"
                  formControlName="email"
                  type="email"
                  placeholder="Your email address"
                  name="email">
              </mat-form-field>

            </div>

            <div class="col-xl-3 col-md-6 col-12">

              <mat-form-field class="w-100 standalone-field">
                <span
                  matPrefix
                  matTooltip="Choose a password"
                  class="d-flex flex-nowrap align-items-center justify-content-between me-2">
                  <mat-icon>password</mat-icon>
                  <span class="text-muted">|</span>
                </span>
    
                <input
                  matInput
                  autocomplete="new-password"
                  formControlName="password"
                  placeholder="Choose a password"
                  [type]="showPassword ? 'text' : 'password'"
                  name="password"
                  [pattern]="CommonRegEx.password">
                <button
                  mat-icon-button
                  (click)="toggleShowPassword()"
                  type="button"
                  matSuffix>
                  <mat-icon>visibility{{showPassword ? '_off' : ''}}</mat-icon>
                </button>

                <mat-error>{{CommonErrorMessages.password}}</mat-error>
              </mat-form-field>

            </div>

            <div class="col-xl-3 col-md-6 col-12">

              <mat-form-field class="w-100 standalone-field">
                <span
                  matPrefix
                  matTooltip="Repeat password"
                  class="d-flex flex-nowrap align-items-center justify-content-between me-2">
                  <mat-icon>password</mat-icon>
                  <span class="text-muted">|</span>
                </span>
    
                <input
                  matInput
                  autocomplete="new-password"
                  formControlName="passwordRepeat"
                  placeholder="Repeat password"
                  [type]="showPassword ? 'text' : 'password'"
                  [errorStateMatcher]="matcher"
                  name="password">
                <mat-error *ngIf="configForm.hasError('notSame')">Passwords must match</mat-error>
              </mat-form-field>

            </div>
          </div>
        </div>

        <div class="col-12 d-flex justify-content-end mt-3">

          <button
            mat-flat-button
            type="submit"
            class="px-5"
            color="primary"
            [disabled]="waiting">
            Save
          </button>

        </div>

      </div>

    </form>

  </mat-card-content>
</mat-card>
